<template>
  <div id="app">
    <a-layout class="layout">
      <a-layout-header
        :style="{
          background: '#3f50b5',
          position: 'fixed',
          width: '100%',
          boxShadow:
            '0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%) ',
          zIndex: '1'
        }"
      >
        <div class="logo">PP-station</div>
        <a-menu
          :selectedKeys="[$route.path]"
          theme="light"
          mode="horizontal"
          v-if="UserModule.token"
          :style="{
            lineHeight: '64px',
            float: 'left',
            background: 'rgba(165, 42, 42, 0)',
            fontSize: '16px',
            fontWeight: '600',
            color: 'white',
            borderBottom: '0'
          }"
          @click="handleMenuChange"
        >
          <a-menu-item key="/">首页</a-menu-item>
          <a-menu-item key="/album">相册</a-menu-item>
          <a-menu-item key="/recycler">回收站</a-menu-item>
          <a-menu-item key="/user">个人中心</a-menu-item>
        </a-menu>
        <div :style="{ float: 'right' }">
          <a-button
            type="text"
            :style="{ color: 'white' }"
            v-if="!UserModule.token"
            @click="goTo('/login')"
            >登录|注册</a-button
          >

          <a-dropdown v-if="UserModule.token">
            <a-avatar
              style="
                background-color: #1890ff;
                font-weight: bold;
                font-size: 30px;
                line-height: 35px;
              "
              :src="UserModule.profileLink"
              size="large"
              >{{ UserModule.username.substring(0, 1) }}</a-avatar
            >
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a @click="logOut()">退出登录</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
          <span
            v-if="UserModule.token"
            :style="{ marginLeft: '10px', color: 'white', fontSize: '16px' }"
            >{{ UserModule.username }}</span
          >
        </div>
      </a-layout-header>
      <a-layout-content
        :style="{
          paddingTop: '85px',
          minHeight: '900px',
          background: 'white'
        }"
      >
        <router-view />
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        PP-Station ©2022 Created by Sammmmmmmy
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script lang="ts">
import store from './store';
import { defineComponent } from 'vue';
import { UserModule } from './store/modules/user';
import { useRouter } from 'vue-router';
import type { MenuProps } from 'ant-design-vue';

export default defineComponent({
  setup() {

    // 在页面加载时读取localStorage里的状态信息,并在使用后清除内存
    const storeSession = sessionStorage.getItem('storeSession');
    if (storeSession) {
      store.replaceState(Object.assign(store.state, JSON.parse(storeSession)));

      setTimeout(() => {
        sessionStorage.removeItem('storeSession');
      }, 300);
    }

    // 在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('storeSession', JSON.stringify(store.state));
    });

    const router = useRouter();

    // 路由跳转
    const goTo = (path: string) => {
      router.push(path);
    };

    // 退出登录
    const logOut = () => {
      UserModule.LogOut().then((res) => {
        router.go(0);
      });
    };

    // 菜单点击事件
    const handleMenuChange: MenuProps['onClick'] = (e: any) => {
      const key = e.key;
      router.push(key);
    };

    return {
      goTo,
      logOut,
      handleMenuChange,
      UserModule
    };
  },
  created() {}
});
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}

.site-layout-content {
  min-height: 280px;
  padding: 24px;
  // background: #fafafa;
}

.logo {
  font: Angular;
  font-size: 32px;
  font-weight: 800;
  color: white;
  float: left;
  width: 160px;
  height: 30px;
  line-height: 31px;
  margin: 16px 24px 16px 0;
}

.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.ant-menu-horizontal {
  border: 0;
  border-bottom: 0;
  box-shadow: none;
}
</style>
